<template>
  <div class="content">
    <div class="haeder">
      <h3>用户列表</h3>
      <el-button type="primary" @click="handleNewUserClick">新建用户</el-button>
    </div>
    <div class="table">
      <el-table :data="pageList" border style="width: 100%">
        <el-table-column type="selection" />
        <el-table-column type="index" label="序号" />
        <el-table-column prop="name" label="部门名称" width="100px" />
        <el-table-column prop="leader" label="部门领导" width="100px" />
        <el-table-column prop="parentId" label="上级部门" width="180px" />

        <el-table-column prop="createAt" label="创建时间">
          <template #default="scope">
            {{ formatUTC(scope.row.createAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="updateAt" label="创建时间">
          <template #default="scope">
            {{ formatUTC(scope.row.updateAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <!-- 插槽作用域插槽传入id -->
          <template #default="scope">
            <el-button
              @click="handleEditBtnClick(scope.row)"
              type="primary"
              icon="Edit"
              size="small"
              >编辑</el-button
            >
            <el-button
              @click="handleDeleteBtnClick(scope.row.id)"
              type="danger"
              icon="Delete"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import useSystemStore from '@/store/main/system/system'
import { storeToRefs } from 'pinia'
import { formatUTC } from '@/utils/format'
import { ref } from 'vue'
const systemStore = useSystemStore()
const { pageList, pageTotalCount } = storeToRefs(systemStore)

const currentPage = ref(1)
const pageSize = ref(10)
//定义事件用于新建用户按钮
//兄弟组件通信：向父组件传递数据，由父组件决定是否执行新建用户操作
//user组件拿到modal组件实例，然后调用实例的函数改变弹出框属性是否为真

const emit = defineEmits(['newClick', 'editClick'])
function handleEditBtnClick(itemData: any) {
  //传给user，user传递给modal组件，然后弹出编译框
  emit('editClick', itemData)
}

fecthPageListData()
function handleSizeChange() {
  fecthPageListData()
}
function handleCurrentChange() {
  fecthPageListData()
}
//定义函数发送网络请求
function fecthPageListData(formData: any = {}) {
  const size = pageSize.value
  // offset = 偏移量，表示跳过前 offset 条数据，从第 offset + 1 条开始返回数据。
  //size = 每页显示的记录数。
  const offset = (currentPage.value - 1) * size
  const pageInfo = { size, offset }
  // 展开运算符）表示将对象的所有可枚举属性展开
  // 效果相当于 浅合并（shallow merge） 两个对象
  // 如果有同名属性，后面的对象属性会覆盖前面的
  const queryInfo = { ...pageInfo, ...formData }

  systemStore.postPageListDataAction('department', queryInfo)
}
// onMounted(async (info: any) => {
//   await systemStore.postUsersListAction(info) // 等待数据加载
// })
//允许父组件通过 ref 引用直接调用子组件的方法
defineExpose({ fecthPageListData })
//删除按钮
function handleDeleteBtnClick(id: number) {
  systemStore.deletePageByIdAction('department', id)
}
//新建用户按钮
function handleNewUserClick() {
  emit('newClick')
}
</script>

<style lang="less" scoped>
.content {
  margin: 20px;
  background-color: #fff;
}
.haeder {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; //垂直居中
  margin-bottom: 10px;
  .title {
    font-size: 21px;
  }
}
.pagination {
  margin-right: 10px;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>